<!--<template>
	<div class="lc_wrap">
		<el-row class="auditManual">
			<div class="overlay" ref="overlay">
				<div class="tree-tool" @click="changeTreeBox">
					<div class="tool-line"></div>
					<div class="tool-line"></div>
					<div class="tool-line"></div>
				</div>
			</div>

			<el-col :span="leftWidth">
				<div class="box">
					<basic-container>
						<avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick" />
					</basic-container>
				</div>
			</el-col>

			<el-col :span="rightWidth" class="table-wrapper">
				<basic-container>
					<div class="search-tools">
						<div class="search-left">
							<el-date-picker v-model="dateFrom" type="date" size="small" placeholder="选择日期" :picker-options="pickerOption" value-format="yyyy-MM-dd"></el-date-picker>
						</div>
						<div class="search-right">
							<div class="search-btns">
								<el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn">搜 索</el-button>
							</div>
						</div>
					</div>
					<el-table size="mini" :loading="loading" :height="tableHeight" :data="tableData" :header-cell-style="{background:'#f4f4f4',color:'#666'}">
						<el-table-column v-for="(item, index) in tableHead" :key="index" :prop="item.prop" :label="item.label" align="right" :width="item.width">
							<template slot="header" slot-scope="scope">
								<el-checkbox v-if="item.prop=='date'" :indeterminate="isIndeterminateDate" v-model="checkAllDate" @change="checked=>handleCheckAllChange(checked,item.prop)">{{item.label}}</el-checkbox>
								<el-checkbox v-if="item.prop=='name'" :indeterminate="isIndeterminateName" v-model="checkAllName" @change="checked=>handleCheckAllChange(checked,item.prop)">{{item.label}}</el-checkbox>
								<el-checkbox v-if="item.prop=='address'" :indeterminate="isIndeterminateAddress" v-model="checkAllAddress" @change="checked=>handleCheckAllChange(checked,item.prop)">{{item.label}}</el-checkbox>
							</template>
							<template slot-scope="scope">
								<el-checkbox v-if="item.prop=='date'" v-model="scope.row.checkDate" @change="checked=>handleCheckOneChange(checked,item.prop,index)">{{scope.row.date}}</el-checkbox>
								<el-checkbox v-if="item.prop=='name'" v-model="scope.row.checkName" @change="checked=>handleCheckOneChange(checked,item.prop,index)">{{scope.row.name}}</el-checkbox>
								<el-checkbox v-if="item.prop=='address'" v-model="scope.row.checkAddress" @change="checked=>handleCheckOneChange(checked,item.prop,index)">{{scope.row.address}}</el-checkbox>
							</template>
						</el-table-column>
					</el-table>
					<div class="bottom_box">
						<el-button type="primary" size="normal" @click="approvedBtn">审核通过</el-button>
					</div>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getAliasType, getList, update, getDeptTree } from "@/api/swaq/auditManual";
	import { dateFormat } from "@/util/date";
	export default {
		data() {
			return {
				tableHeight: 'calc(100% - 100px)',
				checkAllDate: true,
				checkAllName: true,
				checkAllAddress: true,
				isIndeterminateDate: false,
				isIndeterminateName: false,
				isIndeterminateAddress: false,
				tableHead: [{
					prop: "date",
					label: "日期",
					width: "180"
				}, {
					prop: "name",
					label: "姓名",
					width: "180",
				}, {
					prop: "address",
					label: "地址"
				}],
				tableData: [{
					checkDate: true,
					checkName: true,
					checkAddress: true,
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					checkDate: true,
					checkName: true,
					checkAddress: true,
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					checkDate: true,
					checkName: true,
					checkAddress: true,
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					checkDate: true,
					checkName: true,
					checkAddress: true,
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				leftWidth: 5,
				rightWidth: 19,
				loading: false,
				dateFrom: dateFormat(new Date(), 'yyyy-MM-dd'),
				dateTo: dateFormat(new Date(), 'yyyy-MM-dd'),
				// 左侧树配置属性
				treeOption: {
					nodeKey: 'id',
					addBtn: false,
					menu: false,
					size: 'small',
					defaultExpandAll: true,
					props: {
						label: 'title',
						value: 'value',
						children: 'children'
					}
				},
				treeData: [],
				nodeId: null,
				deptInfoName: '',
				deptInfoId: '',
			};
		},
		computed: {
			...mapGetters(["permission"])
		},
		mounted() {
			this.initData()
		},
		watch: {

		},
		methods: {
			handleCheckAllChange(val, x) {
				if(x == 'date') {
					this.isIndeterminateDate = false
					this.tableData.forEach(item => {
						item.checkDate = val
					})
				} else if(x == 'name') {
					this.isIndeterminateName = false
					this.tableData.forEach(item => {
						item.checkName = val
					})
				} else if(x == 'address') {
					this.isIndeterminateAddress = false
					this.tableData.forEach(item => {
						item.checkAddress = val
					})
				}
			},
			handleCheckOneChange(val, x, y) {
				debugger
				console.log('one', val)
				let totalCount = this.tableData.length
				let someStatusCount = 0
				if(x == 'date') {
					this.tableData.forEach(item => {
						if(item.checkDate === val) {
							someStatusCount++
						}
					})
					this.checkAllDate = totalCount === someStatusCount ? val : !val
					this.isIndeterminateDate = someStatusCount > 0 && someStatusCount < totalCount
				} else if(x == 'name') {
					this.tableData.forEach(item => {
						if(item.checkName === val) {
							someStatusCount++
						}
					})
					this.checkAllName = totalCount === someStatusCount ? val : !val
					this.isIndeterminateName = someStatusCount > 0 && someStatusCount < totalCount
				} else if(x == 'address') {
					this.tableData.forEach(item => {
						if(item.checkAddress === val) {
							someStatusCount++
						}
					})
					this.checkAllAddress = totalCount === someStatusCount ? val : !val
					this.isIndeterminateAddress = someStatusCount > 0 && someStatusCount < totalCount
				}
			},
			/**
			 * 树点击事件
			 */
			nodeClick(data) {
				this.nodeId = data.key
				this.deptInfoName = data.title
				this.deptInfoId = data.key
				this.onLoad()
			},
			/**
			 * 获取第一个最下层节点
			 */
			getFirstNode(tree, node = null) {
				tree.forEach(item => {
					if(!node) {
						if(item.children && item.children.length) {
							node = this.getFirstNode(item.children, node)
						} else {
							node = item
						}
					}
				})
				return node
			},
			changeTreeBox() {
				this.leftWidth = this.leftWidth == 5 ? 0 : 5
				this.rightWidth = this.rightWidth == 19 ? 24 : 19
			},
			/**
			 * 初始化
			 */
			initData() {
				// 树内容接口
				getDeptTree('2').then(res => {
					this.treeData = res.data.data
					this.$nextTick(function() {
						// 获取el-tree对象
						let elTreeDom = this.$refs.tree.$children[1]
						// 获取要设置的节点-第一个最下层节点,并设置默认选中
						let node = this.getFirstNode(res.data.data)
						elTreeDom.setCurrentNode(node)
						this.nodeClick(node)
					})
				})
				// 预警类型下拉
				getAliasType().then(res => {
					if(res.data.success) {
						this.aliasTypeOption = res.data.data
						this.aliasTypeOption.unshift({
							id: '',
							dictValue: '全部'
						})
					}
				})
			},
			refreshChange() {
				this.onLoad();
			},
			searchBtn() {
				this.page.currentPage = 1
				this.onLoad()
			},
			onLoad() {
				this.loading = true;
				// let _this = this
				getList(this.page.currentPage, this.page.pageSize, this.dateFrom, this.dateTo, this.deptInfoId, this.aliasType).then(res => {
					if(res.data.success) {
						this.data = res.data.data.records
						this.page.total = res.data.data.total;
					} else {
						this.$message.error('操作失败')
					}
					this.loading = false
				})
			},
		}
	};
</script>
<style lang="scss">
	.anchorBL {
		display: none;
	}
	
	.auditManual {
		.el-card__body {
			height: calc(100% - 35px);
			.avue-crud {
				height: calc(100% - 155px);
			}
		}
	}
</style>
<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 500px;
	}
	
	.box {
		height: 100%;
		margin-bottom: 0;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
	
	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
		font-size: 14px;
	}
	
	.search-left {
		display: flex;
		height: 33px;
		line-height: 33px;
	}
	
	.search-right {
		display: flex;
	}
	
	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
	
	.overlay {
		position: absolute;
		width: 200px;
		height: 100%;
		opacity: 0;
		display: flex;
		align-items: center;
		padding-left: 6px;
		.tree-tool {
			height: 34px;
			width: 18px;
			background: #fff;
			box-shadow: 2px 1px 4px #ccc;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			cursor: pointer;
			display: flex;
			padding: 6px 0;
			z-index: 9999;
			.tool-line {
				margin-left: 3px;
				height: 100%;
				border-left: 1px solid #ddd;
			}
		}
	}
	
	.overlay:hover {
		opacity: 1;
	}
	
	.auditManual {
		.bottom_box {
			text-align: right;
			margin-top: 20px;
		}
	}
</style>-->